<template>
  <div class="box">
    <h1>is</h1>
    <!-- 作用1：解决标签的固定搭配问题 -->
    <ul>
      <!-- <v-one></v-one> -->
      <li is="v-one"></li>
    </ul>

    <!-- 作用2：实现动态组件 -->
    <button @click="comName='v-one'">one</button>
    <button @click="comName='v-two'">two</button>

    <transition enter-active-class="animate__animated animate__fadeIn">
      <div :is="comName"></div>
    </transition>
  </div>
</template>

<script>
import vOne from "./vOne.vue";
import vTwo from "./vTwo.vue";
export default {
  data() {
    return {
      comName: "v-one"
    };
  },
  components: {
    vOne,
    vTwo
  }
};
</script>

<style>
</style>